<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <button type="button" v-on:click="reverseMessage">reverseMessage</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        /*
        * v-on用来定义用户事件比如：v-on:click="reverseMessage()"
        * 将方法定义在methods对象内部
        * */
        new Vue({
            el : "#app",
            data : {
                message : "hello vue.js！"
            },
            methods : {
                reverseMessage : function(){
                    //console.log(this);
                    this.message = this.message.split("").reverse().join("");
                }
            }
        })
    </script>
</body>
</html>